<template>
    <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="待办任务" name="first">
            <el-table :data="apps" highlight-current-row  style="width: 100%;">
            <!--<el-table :data="apps" highlight-current-row v-loading="listLoading" style="width: 100%;">-->
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column v-if="false" prop="id" label="id"/>
                <el-table-column prop="userName" label="提交人" width="150">
                </el-table-column>
                <el-table-column prop="processType" :formatter="formatProtocolType" label="任务类型" width="100">
                </el-table-column>
                <el-table-column prop="curTime" label="提交时间" width="200">
                </el-table-column>
                <el-table-column prop="reason" label="任务描述" width="200">
                </el-table-column>
                <el-table-column label="操作" width="550">
                    <template scope="scope">
                        <el-button size="small" type="warning" @click="handleTask(scope.$index, scope.row)">办理</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="已办任务" name="second">
            <el-table :data="appsDone" highlight-current-row  style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column v-if="false" prop="id" label="id"/>
                <el-table-column prop="userName" label="提交人" width="100">
                </el-table-column>
                <el-table-column prop="processType" :formatter="formatProtocolType" label="任务类型" width="100">
                </el-table-column>
                <el-table-column prop="curTime" label="办理时间" width="200">
                </el-table-column>
                <el-table-column prop="reason" label="任务描述" width="200">
                </el-table-column>
                <el-table-column prop="status" :formatter="formatStatus"  label="处理结果" width="200">
                </el-table-column>
            </el-table>
        </el-tab-pane>
     <!--   <el-tab-pane label="进度查询" name="third">  <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
        </el-tab-pane>-->

    </el-tabs>

    <el-dialog title="办理" :visible.sync="handleVisible">
        <el-form :model="handleForm" label-width="120px" ref="handleForm">
            <el-form-item label="请假人" prop="applicationName" >
                <el-input v-model="handleForm.userName" auto-complete="off" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="请假原因" prop="passId">
                <el-input v-model="handleForm.reason" auto-complete="off" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="passToken">
                <el-input v-model="handleForm.startTime" auto-complete="off" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="结束时间" prop="appUrl">
                <el-input v-model="handleForm.endTime" auto-complete="off" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="请假天数" prop="description">
                <el-input type="textarea" v-model="handleForm.day" readonly="true"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="handleApplyFun('true')">同意</el-button>
            <el-button type="primary" @click.native="handleApplyFun('false')">拒绝</el-button>
        </div>
    </el-dialog>
    </div>
</template>
<script>
    import {getDone, handleApply, listTodo} from "../../api/api";

    export default {
        name: "TaskMng",
        created(){
            let aa=JSON.parse(sessionStorage.getItem("mockUser"))
            const data={
                assign:aa.roleName
            }
            listTodo(data).then(res=>{
                this.apps=res.data;
            }).catch(e=>{})

            getDone(aa.roleName).then(res=>{
                this.appsDone=res.data;
            }).catch(e=>{})

        },
        data() {
            return {
                handleForm:{
                    userName:"",
                    reason:"",
                    startTime:"",
                    endTime:"",
                    day:"",
                    taskId:"",
                    id:-1
                },
                handleVisible:false,
                apps:[],
                appsDone:[],
                tableData: [],
                activeName: 'first'
            };
        },
        methods: {
            handleApplyFun(data){
                const requestParameter={
                    taskId:this.handleForm.taskId,
                    flag:data,
                    id:this.handleForm.id
                }
                handleApply(requestParameter).then(res=>{
                    this.$message({
                        message: res.data,
                        type: 'success'
                    });
                }).catch()
                this.handleVisible=false
            },
            handleClick(tab, event) {
                console.log("tab.name=='second':"+tab.name=='second')
                console.log(tab, event);
            },
            handleTask(a,data){
                this.handleForm.userName=data.userName
                this.handleForm.reason=data.reason
                this.handleForm.startTime=data.startTime
                this.handleForm.endTime=data.endTime
                this.handleForm.day=data.day
                this.handleForm.taskId=data.taskId
                this.handleForm.id=data.id
                this.handleVisible=true;
            },
            formatStatus(row){
                let type = row.status;
                switch (type) {
                    case 'true':
                        type = "通过";
                        break;
                    case 'false':
                        type = "拒接";
                        break;
            }
            return type;
            },
            formatProtocolType(row){
                // 处理协议类型
               {
                    let type = row.processType;
                    switch (type) {
                        case 1:
                            type = "请假";
                            break;
                        case 2:
                            type = "升职";
                            break;
                        case 3:
                            type = "升职";
                            break;
                    }
                    return type;
                }

            }
        }
    };
</script>

<style >
     .el-tabs__nav-wrap {
        margin-top: 20px !important;
        background-color: #f2f2f2 !important;
    }
</style>
